<template>
    <div class="home-page">
        <!-- <div class="search-box">
            <van-search placeholder="请输入搜索关键词" v-model="searchValue" />
        </div> -->
        <van-swipe :autoplay="3000" class="banner">
            <van-swipe-item v-for="(item, index) in bannerImg" :key="index">
                <img v-lazy="item.img_url" />
                <div class="banner_text" v-if="item.is_float==1">{{item.title}}</div>
            </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3" :border="false" class="tabs_box"> 
            <van-grid-item @click="tabsJumpPage('',2)">
                <van-image src="/static/lib/img/tabs_vocal.png" height="38" width="38"  /> 
                <div class="text-center tabs_text">打卡练习</div>
            </van-grid-item> 
            <van-grid-item @click="tabsJumpPage('',0)">
                <van-image src="/static/lib/img/tabs_message.png" height="38" width="38"  /> 
                <div class="text-center tabs_text">我的消息</div>
            </van-grid-item>
            <van-grid-item @click="tabsJumpPage('',1)">
                <van-image src="/static/lib/img/tabs_course.png" height="38" width="38"  /> 
                <div class="text-center tabs_text">我的课程</div>
            </van-grid-item>  
        </van-grid>
        <div class="prd-box" v-if="recommend.length>0">
            <div class="group-title"  @click="tabsJumpPage('',1)">
                <div class="title-items active">即将上课</div> 
                <!-- <div class="title-items"></div>
                <div class="title-items"></div> -->
                <!-- <van-icon name="arrow" class="float-right" style="margin-top:.08rem"/> -->
            </div>
            <div class="live_box">
                <div class="live_prd_list" v-for="(item,index) in recommend" :key="index" @click.stop="lookDetail(item)">
                    <van-image
                    width="100%"
                    height="5.333333rem" 
                    :src="item.live_cover"
                    />
                    <div class="live_info">
                        <div class="title">{{item.title}}</div>
                        <div class="clear-both tv_desc">
                            <p class="float-left">
                                <i class="iconfont icon-dianshi"></i>
                                <van-count-down style="display:inline-block;" :time="item.start_time*1000-new Date().getTime()" millisecond format="DD 天 HH 时 mm 分 ss 秒"  @finish="finishDate"  v-if="newDateTime<= item.start_time*1000" />
                                <span v-if="item.start_time*1000 <= newDateTime&&newDateTime<= item.end_time*1000">正在直播</span> 
                                <span v-if="item.end_time*1000 <= newDateTime">已结束</span>    
                            </p> 
                            <div class="price float-right" > 
                                <img src="/static/lib/img/free.png" alt="" width="40px" height="18px" style="margin-top:1px;">
                            </div>
                        </div>
                    </div>
                </div> 
            </div>
            
        </div> 
        <div class="prd-box" v-if="SectionListData.length>0" v-for="(item,index) in SectionListData" :key="index">
            <div class="group-title"  @click="tabsJumpPage('goodsList',1)">
                <div class="title-items active">{{item.title}}</div> 
                <!-- <div class="title-items"></div>
                <div class="title-items"></div> -->
                <!-- <van-icon name="arrow" class="float-right" style="margin-top:.08rem"/> -->
            </div>
            <prd-list :prdList="item.data" ></prd-list>
        </div> 
    </div>
</template>

<script>
import * as api from './../../api/api'
export default {
    data(){
        return{
            searchValue:'',
            bannerImg: [], //轮播图  
            recommend:[], //正在直播列表
            SectionListData:[],
            newDateTime:new Date().getTime(),
        }
    },
    watch:{
        '$route'(to,from){   
            if(to.path=='/homePage'){
                this.getSubjectLive();
            }
        }
    },
    mounted(){
        this.getBannerData();
        this.getSubjectLive();
        this.getSectionData();
    },
    methods:{
        //banner
        getBannerData(){
            let vm = this;
            api.fetchBannerList().then(res=>{
                if(res.data.code==200){ 
                    vm.bannerImg=res.data.data?res.data.data:[];
                }
            })
        },
        //正在直播列表
        getSubjectLive(){
            let vm = this;
            api.fetchPlaySubject().then(res=>{
                if(res.data.code==200){ 
                    vm.recommend=res.data.data?res.data.data:[]; 
                }
            })
        }, 
        //免费课程
        getSectionData(){
            let vm = this;
            api.fetchSectionList().then(res=>{
                if(res.data.code==200){ 
                    vm.SectionListData=res.data.data?res.data.data:[]; 
                }
            })
        }, 
        tabsJumpPage(url,type){
            if(url){
                this.$router.push({name:url})
            }else{
                this.$dialog.alert({
                    message: '敬请期待...'
                });
            }  
        },
        lookDetail(item){ 
            if(item.id){
              this.$router.push({ name: 'liveDetail',query:{subject_id:item.id} });   
            }  
        },
        finishDate(){
            this.newDateTime=new Date().getTime();
            this.$forceUpdate();
        },
    }, 
    components:{ 

    }

}
</script>


<style scoped lang="scss">
.home-page{
    // padding-top:54px; 
    padding-bottom:64px; 
    height:auto;
    .search-box{
        width:100%;
        position: fixed;
        top:0;
        z-index: 100;
    }
    .banner{
        height:4.4rem;
        width:100%;
        position: relative;
        img{
            width:100%;
            height:100%;
        }
        .banner_text{
            position:absolute; 
            bottom:0;
            left:0;
            width:100%; 
            padding:.213333rem;
            background:rgba(0,0,0,.5);
            color:#fff;
            font-size: .346667rem;
        }   
    }
    .tabs_box{
        .tabs_text{
            margin-top:5px;
            color: #646566;
            font-size: 14px;
            word-wrap: break-word;
        }
    }
    .prd-box{
        width:100%;
        background:#fff;
        margin-top:.133333rem;
        .group-title{
            width:100%;
            padding:.266667rem .4rem;
            &:active{
                background:#efefef;
            }
            .title-items{
                display: inline-block;
                font-size:.36rem; 
            }
            .active{
                font-size:.48rem;
                font-weight: bold; 
            }
        }
        .live_box{
            padding:.266667rem;
            .live_prd_list{
                width:100%; 
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                border-radius: .16rem;
                overflow: hidden;
                margin-bottom: .266667rem;
                .live_info{
                    padding:.3rem;
                    .title{
                        font-size:.48rem; 
                        word-break: break-all;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        color:#000;
                    }
                    .tv_desc{
                        margin-top:.266667rem;
                        .price{
                            color:#e4393c;
                            font-size:.4rem;
                        }
                    }
                }
            }
        } 
    }
     
}

</style>
